<template>
    <div v-loading.fullscreen.lock="loadingBox" element-loading-text="正在删除,请稍等..."
        element-loading-background="rgba(122, 122, 122, 0.8)">
        <div class="title">
            <input type="text" placeholder="search" class="inputSeach" v-model="keyword">
        </div>
        <div class="tables">
            <el-table :data="tableData" style="width:70%" border v-loading="loading" element-loading-text="加载中...">
                <el-table-column prop="DF03000" label="编号" width="180" />
                <el-table-column prop="TitleMark" label="标题备注" />
                <el-table-column prop="StrCT050" label="创建日期" show-overflow-tooltip width="180" />
                <el-table-column prop="StrMT050" label="修改日期" show-overflow-tooltip width="180" />
                <el-table-column prop="NumAL040" label="AL" width="50" />
                <el-table-column prop="NumTE030" label="TE" width="50" />
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small"
                            @click="handleClick(scope.$index, scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click.prevent="DelEssayList(scope.$index, scope.row)"
                            class="del-button">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paging">
                <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesizes"
                    @current-change="handelCurrentChange" />
            </div>
            <div class="newArticle" @click="addArticle" v-loading.fullscreen.lock="loadingArticle"
                element-loading-text="正在跳转页面,请稍等...">
                新建文章
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue';
import { getEssayList, DeleteArticle, DetailedDataRow, setEssayList, getColumnList } from '@/api/SystemMgt.js'
import { ElMessage, ElMessageBox } from 'element-plus'
let { proxy } = getCurrentInstance();
//一、搜索
//***搜索框双向绑定
let keyword = ref('')
// Debounce (防抖): 每次触发事件时设置延迟调用函数，在此期间取消以前触发的事件.
function handleDebounce(funcFollowIn, numDelayIn) {
    let timerInner = null;
    return (...args) => {
        if (timerInner) clearTimeout(timerInner);
        timerInner = setTimeout(() => {
            funcFollowIn.apply(this, args);
        }, numDelayIn);
    };
}
const FunckeyWord = handleDebounce((value) => {
    EssayList()
}, 1500)
watch(
    () => keyword.value,
    (newval, oldval) => {
        FunckeyWord(newval)
        loading.value = true
        loading.text = "正在搜索，请稍等..."

    }
)
//===栏目号
let current = JSON.parse(window.sessionStorage.getItem("datas")).NumDataGroup;
// 一、页面渲染
const loading = ref(true)
let tableData = ref([])
// 分页 条数 总页
let pageIndex = ref(1),
    pagesize = ref(12),
    pagesizes = ref(0)
//***数据渲染
function EssayList() {
    //请求接口参数
    let msg = { CurrentDataGroup: current, PageIndex: pageIndex.value, PageSize: pagesize.value }
    // 搜索时才添加的参数   
    if (keyword.value.length > 0) {
        msg.Keyword = keyword.value
    }
    getEssayList(msg).then((res) => {
        tableData.value = res.Payload.DataList
        // console.log(tableData.value);
        pagesizes.value = Math.ceil(res.Payload.NumRowQuantity / pagesize.value)
        loading.value = false
    })
}
//***分页功能
function handelCurrentChange(val) {
    pageIndex.value = val
    loading.value = true
    EssayList()
}


// 二、删除文章
let loadingBox = ref(false)

//***获取角色号
function user() {
    return JSON.parse(window.sessionStorage.getItem("jsonArrayUserGroup"))[0].NumUserGroup;
}
//***删除功能
function DelEssayList(index, row) {
    //消息弹框
    ElMessageBox.confirm('你确定要删除吗？', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
        .then(() => {
            ElMessage({
                message: "正在删除",
                showClose: true,
            })
            setTimeout(() => {
                loadingBox.value = true
            }, 1000);
            //请求参数
            let msg = { CurrentDataGroup: current, StrPrimaryKey: row.StrPK010, CurrentUserGroup: user() }
            DeleteArticle(msg).then((res) => {
                EssayList()
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                loadingBox.value = false
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}
//===获取路由路径
let addUrl = JSON.parse(window.sessionStorage.getItem('datas'))

// 三、文章编辑。详细数据   
function handleClick(index, row) {
    proxy.$router.push({
        path: addUrl.HyperLinkConfig.DetailSystemMgt.URL,
        query: { StrPrimaryKey: row.StrPK010 }
    })
}
// 四、新建文章
let loadingArticle = ref(false)
function addArticle() {
    loadingArticle.value = true
    //...请求参数
    let msg = { TitleMark: ' 很nice,坤坤', CurrentDataGroup: current, ActionId: "InsertData" }
    //获取文章主键
    setEssayList(msg).then((res) => {
        let str = res.Payload
        loadingArticle.value = false
        proxy.$router.push({
            path: addUrl.HyperLinkConfig.DetailSystemMgt.URL,
            query: { StrPrimaryKey: str }
        })
    })
}
onMounted(() => {
    EssayList()
});
</script>

<style scoped>
.example-showcase .el-loading-mask {
    z-index: 9;
}

.title {
    line-height: 50px;
    font-weight: bold;
    /* background-color: aqua; */
    padding-left: 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}

.inputSeach {
    width: 400px;
    height: 30px;
    font-size: 20px;
    padding-left: 10px;
    outline: none;
    border-radius: 5px;
    border: 2px solid rgb(207, 205, 205);
}

.tables {
    padding: 20px;
    position: relative;
    height: 790px;
}

.tables>>>.el-table .cell {
    white-space: nowrap;
    word-break: normal;
}

/* element-Plus样式修改  开始*/
:deep(.el-table__header th) {
    background-color: #F2F3F3;
}

:deep(.el-button--primary span) {
    padding: 5px;
    background-color: rgb(60, 77, 230);
    border-radius: 5px;
    color: rgb(250, 250, 250);
}

:deep(.el-button--primary span:hover) {
    background-color: rgb(93, 103, 190);
}

:deep(.del-button span) {
    padding: 5px;
    background-color: rgb(245, 18, 37);
    border-radius: 5px;
    color: rgb(250, 250, 250);
}

:deep(.del-button span:hover) {
    background-color: rgb(192, 37, 50);
}

/* element-Plus样式修改 结束 */
.paging {
    margin-top: 20px;
}

.newArticle {
    height: 50px;
    background-color: rgb(242, 243, 243);
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 50px;
    text-align: right;
    width: 100%;
    /* color: #3333; */
    font-size: 25px;
    cursor: pointer;
}
</style>
